<template>
  <div>
    <ul>
      <li @click="activeIndex = index" class="item" :class="{ active :index === activeIndex }" v-for="( item,index ) in navs" :key="item">{{item}}</li>
    </ul>
  </div>
</template>


<script>
export default {
  // 存放数据
  data() {
    return {
      navs: ['家电', '生活用品', '数码'],
      activeIndex: 0
    }
  },
  // 在methods内部的方法 获取 data的数据 直接通过this访问
  methods: {}
}
</script>


<style scoped>
ul {
  list-style: none;
}

.item {
  width: 100px;
  line-height: 50px;
  float: left;
  text-align: center;
}

.active {
  color: red;
}
</style>